<template>
  <div class="page">
    <h2>
      <a @click="back" class="btnBack">返回</a>
      产品详情
    </h2>
    <div>
      <div class="image"><img :src="detail.cover" alt="" style="width: 100%;"></div>
      <div class="content">{{detail.desc}}</div>
      <div class="select">
        <label>单价：</label>
        <span>{{detail.price}}元</span>
        <label for="selCopies">份数：</label>
        <select class="selCopies" id="selCopies">
          <option value="1">1份</option>
          <option value="2">2份</option>
          <option value="3">3份</option>
        </select>
      </div>
      <div class="ctrl"><a href="#" class="btnCtrl btnSubmit" @click="submitOrder">提交订单</a></div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import router from '../router'
import Api from '../api'

export default {
  props: {
    message: String
  },
  name: 'HelloWorld-',
  data () {
    return {
      rootApi: 'http://localhost:4000/',
      msg: 'Welcome to Your Vue.js App-1qqqqq',
      detail:{}
    }
  },
  methods: {
    back(){
      router.go(-1);
    },
    goDetail(id){
      router.push('/product/'+id);
    },
    getProductData(id) {
      $.ajax({
        url: this.rootApi + 'product/'+ id,
        type: 'GET',
        dataType: 'json',
        data: null,
        cache: false,
        success :(d)=>{
          if (d.error_code == 0) {
            this.detail = d.data;
          }else{
            console.log(d);
          }
        },
        error: function (xhr, status, err) {
          console.log(status);
        }
      });
    },
    submitOrder(){
      let data1 = this.detail||{};
      let data = {
        p_id:data1.id,
        p_title:data1.title,
        p_cover:data1.cover,
        p_price:data1.price,
        o_copies:document.querySelector('#selCopies').value
      };
      Api.createOrder({
        data,
        success:(d)=>{
          router.push("/payment/" + d.data.insertId );
        }
      });
    }
  },
  mounted(){
    let id = router.history.current.params.id;
    this.getProductData(id);
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
  .ulProList{
    clear: both;list-style: none;margin: 0;padding: 0; text-align: left;
    li{clear: both;list-style: none;margin: 0;padding: 0;
      .image{float: left;width: 100px;height: 100px;
        img{display: block;width: 90px;height: 90px; background: #999;}
      }
      .info{
        h4{font-size: 12px;}
      }
    }
  }
  .btnBack{float: left; font-size: 14px; line-height:30px;}
  .selCopies{ border:1px solid #ccc;width: 100px;}
</style>
